<template>
    <el-container>
        <el-aside width="4rem"><img :src="noticeIcon" alt=""></el-aside>
        <el-main> 
            <van-swipe style="height: 100%;" vertical :autoplay="5000" v-if="notice.length>0" :show-indicators="false">
                <van-swipe-item v-for="(n,item) in notice" :key="item" @click="tologin('/live')">
                    <a>{{n.content}}</a><span>{{n.time}}</span>
                </van-swipe-item>
            </van-swipe>
            </el-main>
    </el-container>
</template>

<script>


    import noticeIcon from "../../assets/img/bg_spzb.png"
    export default {
        name: "Notice",
        data(){
            return {
                noticeIcon:noticeIcon,
                notice:[]
            }
        },
        mounted() {
            this.$api.home.noticeList().then(res=> {
                // 执行某些操作
                this.notice = res.data.data
            })
        }
    }
</script>

<style scoped>
    .el-container{
        background: #fff;
        margin: 0 auto 0.5rem auto;
        padding: 10px 0;
		align-items: center;
    }
    .el-aside {
        color: #333;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
    }
    .el-aside img{
        width: 2.25rem;
    }

    .el-main {
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: flex-start;*/
        color: #333;
        text-align: left;
        /*line-height: 1rem;*/
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding: 0px 50px 0px 0;
        position: relative;
        height: 2rem;

    }
    .el-main span{
        position: absolute;
        right: -2rem;
        font-size: 0.75rem;
        color: #999;
        font-weight: normal;
        top: 0.5rem;



    }

    .el-main .van-swipe-item a{
        /*text-overflow: -o-ellipsis-lastline;*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.2;

    }
    .van-swipe__track{
        height: 2rem !important;
    }
    .el-main .van-swipe-item{
        /*height: 2.3rem!important;*/
        display: flex;
        align-items: center;
    }
    .el-main .van-swipe{
        overflow: initial;
    }
    .el-main ul{
        padding:0;
        margin: 0;
        position: relative;
        transition: top 1s linear;

    }
    .el-main ul li{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        list-style: none;
        text-overflow: -o-ellipsis-lastline;
        /*overflow: hidden;*/
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
        position: relative;

    }
</style>